<template>
  <div class="content">
    <div class="left">
      <div class="crm-layout-left-title">API文档</div>
      <el-menu
        router
        default-active="/developmentguide/research/s1"
        class="el-menu-vertical-demo"
        style="border-right: 0"
      >
        <el-menu-item :class="activeNum === index ? 'active':''" v-for="(d,index) in data.list" :key="index" @click="handleNodeClick(d,index)">{{d.label}}</el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <Top :listcontent="listcontent"/>
      <Bottom :listcontent="listcontent" :width="width"/>
    </div>
  </div>
</template>

<script>
import Top from "../../components/listContent/top.vue";
import Bottom from "../../components/listContent/bottom.vue";
export default {
  components: {
    Top,
    Bottom
  },
  data() {
    return {
      activeNum:0,
      data: {
        list: [
          {
            label: '交易消息',
            content: [
              [
                '卖家修改交易备注',
                '卖家修改交易备注时触发',
                '教育多校区-总部|微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-合伙人|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|教育多校区-分部|酒店|企微助手|零售连锁前置仓|有赞连锁L-门店'
              ], [
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                '卖家部分发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],
            ]
          },
          {
            label: '交易退款',
            content: [
              [
                '卖家主动退款',
                '	卖家主动退款时触发',
                '微商城单店|零售单店'
              ],  [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ], [
                '卖家拒绝退款',
                '	卖家拒绝退款且退款单状态变成SELLER_REFUSE_BUYER(卖家拒绝退款)时触发。注意：卖家拒绝换货不触发该消息。',
                '微商城单店'
              ],
            ]
          },
          {
            label: '客户消息V3',
            content: [
              [
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ], [
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ],[
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ],[
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ],[
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ],[
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ],[
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ],[
                '客户关系创建消息',
                '企业微信的客户关系新增到有赞企微助手后，触发该消息推送',
                '微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店'
              ],
            ]
          }, 
          {
            label: '商品评价',
            content: [
              [
                '商品评价消息',	
                '客户在评价订单时触发，包含新增评价2-更新评价 ，3-删除评价',	
                '微商城单店|零售单店'
              ],
              [
                '商品评价商家回复消息',	
                '商品评价被商家回复'	,
                '微商城单店',
              ],
              [
                '商品评价追评变更消息',
              	'商品评价追评发生变更时目前仅有新增'	,
                '微商城单店'
              ]
            ]
          }, 
          {
            label: '商品消息',
            content: []
          }, 
          {
            label: '商品分组消息',
            content: []
          }, 
          {
            label: '客户消息V2',
            content: []
          }, 
          {
            label: '店铺升级完成推送',
            content: []
          }, 
          {
            label: '会员卡消息',
            content: []
          },
          {
            label: '会员等级消息',
            content: [
              [
                '卖家修改交易备注',
                '卖家修改交易备注时触发',
                '教育多校区-总部|微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-合伙人|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|教育多校区-分部|酒店|企微助手|零售连锁前置仓|有赞连锁L-门店'
              ], [
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                '卖家部分发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],
            ]
          }, 
          {
            label: '成长值变更消息',
            content: []
          },
          {
            label: '销售员订单结算消息',
            content: []
          },
          {
            label: '销售员消息',
            content: []
          },
          {
            label: '销售员客户关系变更',
            content: []
          },
          {
            label: '优惠劵和忧患码消息',
            content: []
          },
          {
            label: '积分商城消息',
            content: []
          },
          {
            label: '积分消息V2',
            content: []
          },
        ]
      },
      listcontent: {
        title: '消息列表',
        title1: '交易消息',
        head: ['消息事件', '触发场景', '支持店铺类型'],
        filter: [
          { quanbu: '全部' },
          { wei: '微商城单店' },
          { zongbuD: '有赞连锁D-总部' },
          { wangdianD: '有赞连锁D-总部' },
          { ling: '零售单店' }
        ],
        content: [
              [
                '卖家修改交易备注',
                '卖家修改交易备注时触发',
                '教育多校区-总部|微商城单店|有赞连锁D-合伙人|有赞连锁D-总部|有赞连锁D-网店|零售单店|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-合伙人|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|教育多校区-分部|酒店|企微助手|零售连锁前置仓|有赞连锁L-门店'
              ], [
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                '卖家部分发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],[
                '卖家发货',
                '卖家对所有商品发货完成，且主订单状态为「商家已发货」时触发',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],
        ]
      },
      width:{
        th1:'width:225px',
        th2:'width:400px',
        th3:'width:270px',
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  methods: {
    handleNodeClick(d,i) {
      this.listcontent.title1 = d.label;
      this.listcontent.content = d.content;
      this.activeNum = i;
      console.log(this.listcontent.content);
    }
  }
};
</script>

<style lang="less" scoped>

.content {
  display: flex;
    width: 1200px;
    margin: auto;

  .left {
      width: 360px;
      padding-right: 22px;
      margin-top: 24px;
      border-right: 1px solid #ebedf0;
      box-sizing: border-box;

    .crm-layout-left-title {
      font-weight: 700;
      font-size: 16px;
      height: 46px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebedf0;
      margin-bottom: 10px;
    }
    /deep/ .el-submenu__title {
      text-align: left;
    }

    /deep/.el-menu-item {
      text-align: left;
      height: 40px;
      line-height: 40px;

    }
    .active{
      color: #409EFF;
    }
  }
}
</style>